Add Charts into Our React App with Nivo — Pie Chart

Nivo lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Pie Chart

Nivo comes with code to let us add a pie chart into our React app.

To install the required packages, we run:

npm i @nivo/pie

Then we can add the chart by writing:

import React from "react";
import { ResponsivePie } from "@nivo/pie";

const data = [
  {
    id: "c",
    label: "c",
    value: 120,
    color: "hsl(271, 70%, 50%)"
  },
  {
    id: "stylus",
    label: "stylus",
    value: 174,
    color: "hsl(292, 70%, 50%)"
  },
  {
    id: "go",
    label: "go",
    value: 225,
    color: "hsl(47, 70%, 50%)"
  }
];

const MyResponsivePie = ({ data }) => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: "nivo" }}
    borderWidth={1}
    borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextColor="#333333"
    radialLabelsLinkColor={{ from: "color" }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor="#333333"
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        size: 4,
        padding: 1,
        stagger: true
      },
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        rotation: -45,
        lineWidth: 6,
        spacing: 10
      }
    ]}
    fill={[
      {
        match: {
          id: "ruby"
        },
        id: "dots"
      },
      {
        match: {
          id: "c"
        },
        id: "dots"
      },
      {
        match: {
          id: "go"
        },
        id: "dots"
      },
      {
        match: {
          id: "python"
        },
        id: "dots"
      },
      {
        match: {
          id: "scala"
        },
        id: "lines"
      },
      {
        match: {
          id: "lisp"
        },
        id: "lines"
      },
      {
        match: {
          id: "elixir"
        },
        id: "lines"
      },
      {
        match: {
          id: "javascript"
        },
        id: "lines"
      }
    ]}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 56,
        itemsSpacing: 0,
        itemWidth: 100,
        itemHeight: 18,
        itemTextColor: "#999",
        itemDirection: "left-to-right",
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsivePie data={data} />
    </div>
  );
}

We define the data array with the pie data.

label has the pie chunk labels.

value has the pie chunk size values.

Then add the ResponsivePie component into our chart.

margin has the margins.

data has the pie chart data.

innerRadius has the inner radius size.

colors have the color scheme for the pie slices.

borderWidth has the border width.

borderColor has the border-color scheme.

radialLabelsSkipAngle defines the angle threshold for when the label is hidden.

If it’s smaller than the given size, then the label is hidden.

radialLabelsTextColor has the text color of the pie.

radialLabelsLinkColor has the labels link color.

sliceLabelsSkipAngle has the angle threshold for skipping rendering the slice label.

If it’s smaller than the given threshold, then the slice label is hidden.

sliceLabelsTextColor has the text color.

defs have the pattern definitions for the slices.

color have the pattern color.

type has the pattern type.

fill has the fill color for the slices and legend.

legends has the legend settings.

itemSpacing , itemWidth , itemHeight , itemTextColor , and itemDirection has the item dimensions, spacing, and color.

effects have the effects when we hover over the legend items.

Then in App , we set the width and height to render the pie chart.

Conclusion

We can add pie charts easily into our React app with Nivo.